import { useParams, useMatch } from 'react-router-dom'
import { useState, useEffect, } from 'react'
import { Button, InputNumber, Tabs, Select, Space } from 'antd';
import { MessageTwoTone, ShopOutlined, StarOutlined, StarTwoTone } from '@ant-design/icons';
import type { TabsProps } from 'antd';
import axios from 'axios'
import "../index.less"
import DetailsCommodity from './DetailsCommodity';
import DetailsEvaluation from './DetailsEvaluation';

const provinceData = ['湖北', '湖南'];

const cityData: any = {
  湖北: ['武汉', '十堰', '黄冈'],
  湖南: ['长沙', 'Suzhou', 'Zhenjiang'],
};

type CityName = keyof typeof cityData;
export default function Details() {
  const [info, setInfo] = useState<any>({})
  const [origin, setOrigin] = useState<any>("河南郑州")
  const [collected, setCollected] = useState<any>(false)
  const { category, name, id, } = useParams()
  const x = useMatch('/details/:category/:name/:id')
  const [cities, setCities] = useState(cityData[provinceData[0]]);
  const [secondCity, setSecondCity] = useState(cityData[provinceData[0]]);
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: `宝贝详情`,
      children: <DetailsCommodity info={info} />,
    },
    {
      key: '2',
      label: `宝贝评价`,
      children: <DetailsEvaluation info={info} />,
    }
  ];

  useEffect(() => {
    let params = {
      id: id
    }
    axios.post("http://localhost:8080/api/detailInfo", params).then((response) => {
      if (Object.keys(info).length == 0) {
        setInfo(response.data.result);
      }
    });
  }, [info]);

  const handleProvinceChange = (value: CityName) => {
    setCities(cityData[value]);
    setSecondCity(cityData[value][0]);
  };

  const onSecondCityChange = (value: CityName) => {
    setSecondCity(value);
  };

  const onChangeInputNum: any = (value: number) => {
    console.log('changed', value);
  };
  const changeCollected = () => {
    setCollected(!collected)
  };

  const changeTabs = (key: string) => {
    console.log(key);
  };

  return (
    <div className='detail common'>
      <div className="shopinformation">
        <div className="shopimg">
          <img src={info.shopPicture} alt="" />
        </div>
        <div className="shop_title">
          <b>{info.shopName}</b>
        </div>
        <div className="evaluation">
          <div className="serve">
            <p className="serve_title">宝贝描述</p>
            <p className='serve_num'><b>{info.babyDescription}</b></p>
          </div>
          <div className="serve">
            <p className="serve_title">卖家服务</p>
            <p className='serve_num'><b>{info.sellerService}</b></p>
          </div>
          <div className="serve">
            <p className="serve_title">物流服务</p>
            <p className='serve_num'><b>{info.logisticsService}</b></p>
          </div>
        </div>
        <div className="buttons">
          <Button className='button' icon={<MessageTwoTone />}>
            联系客服
          </Button>
          <Button className='button' icon={<ShopOutlined />}>
            进入店铺
          </Button>
        </div>
      </div>
      <div className="commodityInformation">
        <div className="commodityIMG">
          {info.shopIMG ? <div className="img_big">
            <img src={info.shopIMG[0]} alt="" />
          </div> : ""}
          {
            info.shopIMG ? <div className="img_small">
              {info.shopIMG.map((item: any, index: number) => (
                <div key={index} className="img_room">
                  <img src={item} alt="" />
                </div>
              ))}
            </div> : ""
          }
        </div>
        <div className="commodity_content">
          <div className="content_title">{info.commodityName}</div>
          <div className="content_sale">月销 {info.sales}</div>
          <div className="price">
            <span>热卖促销</span>
            <span className='price_before'>￥{info.price}</span>
            <span className='price_now'>券后<span className='price_now_big'>￥{info.nowPrice}</span></span>
          </div>
          <div className="distribution">
            <div className="distribution_text">配送：</div>
            <div className="distribution_address">
              {origin} 至
              <Space wrap className='select'>
                <Select
                  defaultValue={provinceData[0]}
                  style={{ width: 120 }}
                  onChange={handleProvinceChange}
                  options={provinceData.map((province) => ({ label: province, value: province }))}
                />
                <Select
                  style={{ width: 120 }}
                  value={secondCity}
                  onChange={onSecondCityChange}
                  options={cities.map((city: any) => ({ label: city, value: city }))}
                />
              </Space>
              <p>快递: 免运费</p>
            </div>
          </div>
          <div className="num">
            <span className="num_text">数量：</span>
            <span className="num_button">
              <InputNumber min={1} max={1000} defaultValue={1} onChange={onChangeInputNum} />
            </span>
            <span className='num_status'>有货</span>
          </div>
          <div className="evaluation">
            <span className="evaluation_text">商品评价：</span>
            <span>已有 { } 人评价</span>
          </div>
          <div className="buttons">
            <div className="button">
              <Button className='button_purchase'>领券购买</Button>
              <Button className='button_car'>加入购物车</Button>
            </div>
            <div className="collect">
              <span onClick={changeCollected}>{collected ? <StarTwoTone twoToneColor="#F76E00" style={{ marginRight: "10px" }} /> : <StarOutlined style={{ marginRight: "10px" }} />}</span>
              <span>收藏</span>
            </div>
          </div>
        </div>
      </div>
      <div className="commodityDetail">
        <Tabs defaultActiveKey="1" items={items} onChange={changeTabs} />
      </div>
    </div>
  )
}